<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="destroy">click</button>
        {{msg}}
        <v-test></v-test>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;

    Vue.component("v-test",{
        template:"<strong>v-test</strong>",
        beforeCreate() {
            console.log("v-test beforeCreate");
        },
        created(){
            console.log("v-test created");
        },
        beforeMount(){
            console.log("v-test beforeMount");
        },
        mounted(){
            console.log("v-test mounted")
        },
        beforeUpdate() {
            console.log("v-test beforeUpdate")
        },
        updated(){
            console.log("v-test updated")
        },
        beforeDestroy(){
            console.log("v-test beforeDestroy")
        },
        destroyed() {
            console.log("v-test destroyed");
        }
    })

    new Vue({
        el:"#app",
        data:{msg:""},
        methods:{
            destroy(){this.$destroy()}
        },
        beforeCreate() {
            console.log("app beforeCreate");
        },
        created(){
            console.log("app created");
        },
        beforeMount(){
            console.log("app beforeMount");
        },
        mounted(){
            console.log("app mounted");
            /*this.timer = setInterval(()=>{
                console.log("setInterval")
                this.msg += "❤"
            },2000)*/
        },
        beforeUpdate() {
            console.log("app beforeUpdate")
        },
        updated(){
            console.log("app updated")
        },
        beforeDestroy(){
            console.log("app beforeDestroy")
        },
        destroyed() {
            console.log("app destroyed");
        }
    })
</script>
</html>